<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@include file="theme/Header.jsp" %>
<script type="text/javascript" src="js/uap002add.js" ></script>
<script type="text/javascript">
    $().ready(function() {
        unlockExceptFieldSet();
        $('#check').show();
        $('#edit').hide();
        $('#detailExcept').hide();

        $('#check').click(function(){

            var url="CallExcept";
            var dataSet={
                plate : $("#plate").val() ,
                province : $("#province").val(),
                line: $("#line").val(),
                uapDate: $("#uapDate").val(),
                hour: $("#hour").val(),
                minute: $("#minute").val()
            };         
            $.post(url,dataSet,function(data){
                alert(data);
                if(data == "0") {
                    $("#exceptStatus").html("<div style='color:red'>***ไม่ยกเว้น***</div>");
                    lockExceptFieldSet();
                    $('#detailExcept').show();
                } else if(data == "1") {
                    $("#exceptStatus").html("<div style='color:green'>***รถยกเว้น***</div>");
                    $("#plate").val('');
                } else if(data == "plate") {
                    $("#exceptStatus").html("<div style='color:red'>***กรอกหมายเลขทะเบียน***</div>");
                    $("#plate").focus();
                } else if(data == "province") {
                    $("#exceptStatus").html("<div style='color:red'>***กรอกจังหวัด***</div>");
                    $("#province").focus();
                } else if(data == "line") {
                    $("#exceptStatus").html("<div style='color:red'>***กรอกสายทาง***</div>");
                    $("#line").focus();
                } else if(data == "uapDate") {
                    $("#exceptStatus").html("<div style='color:red'>***กรอกวันที่พลการ***</div>");
                    $("#line").focus();
                } else if(data == "time") {
                    $("#exceptStatus").html("<div style='color:red'>***กรอกเวลาที่พลการ***</div>");
                    $("#hour").focus();
                }
            });
        });

        $('#edit').click(function(){
            unlockExceptFieldSet();
            $('#detailExcept').hide();
        });

    });

    

    function lockExceptFieldSet() {
        var bg = "#F2F2F2";
        $('#edit').show();
        $('#check').hide();

        $('#plate').css("background",bg);
        $('#plate').attr("readonly","readonly");
        $('#province').css("background",bg);
        $('#province').attr("readonly","readonly");
        $('#line').css("background",bg);
        $('#line').attr("readonly","readonly");
        $('#uapDate').css("background",bg);
        $('#uapDate').attr("readonly","readonly");
        $('#hour').css("background",bg);
        $('#hour').attr("readonly","readonly");
        $('#minute').css("background",bg);
        $('#minute').attr("readonly","readonly");
    }

    function unlockExceptFieldSet() {
        var bg = "#FFFFCC";
        $('#check').show();
        $('#edit').hide();
      
        $('#plate').css("background",bg);
        $('#plate').removeAttr("disabled");
        $('#province').css("background",bg);
        $('#province').removeAttr("disabled");
        $('#line').css("background",bg);
        $('#line').removeAttr("disabled");
        $('#uapDate').css("background",bg);
        $('#uapDate').removeAttr("disabled");
        $('#hour').css("background",bg);
        $('#hour').removeAttr("disabled");
        $('#minute').css("background",bg);
        $('#minute').removeAttr("disabled");
        
    }
</script>
<div id="site-root">
    <div>
        <a href="UAP002Manage">[UAP002- จัดการข้อมูลรถพลการตำรวจ]</a> [เพิ่มข้อมูล]
    </div>
</div>

<form action="UAP002Add" id="frm_uap002add" method="post">
    <div id="source-data">
        <fieldset id="exceptFieldSet" style="background: #FFF">
            <legend>ตรวจสอบข้อมูลรถยกเว้น</legend>
            <div id="message">${message}</div>
            <table width="100%" cellpadding="1">
                <tr>
                    <td width="150px" align="right">หมายเลขทะเบียน : </td>
                    <td width="350px">
                        <input type="text" id="plate" name="plate" class="require" />
                    </td>
                    <td width="150px" align="right">สถานะการยกเว้น :</td>
                    <td><input type="checkbox" /> ไม่แต่งเครื่องแบบ</td>
                </tr>
                <tr>
                    <c:choose>
                        <c:when test="${type == 1}">
                            <td align="right">รถตราโล่ : </td>
                            <td>
                                <select id="province" name="province" class="require" tabindex="11" >
                                    <option value="0" selected>รถตราโล่</option>
                                </select>
                            </td>
                            <td>&nbsp;</td>
                            <td><input type="checkbox" /> ไม่มีสัญญาณไฟ</td>
                            </c:when>
                            <c:otherwise>
                            <td align="right">จังหวัด : </td>
                            <td>
                                <select id="province" name="province" class="require" tabindex="11" >
                                    <option value="" selected>เลือกจังหวัด</option>
                                    <c:forEach items="${provinceList}" var="p" varStatus="i">
                                        <option value="${p.provinceId}">${p.provinceName}</option>
                                    </c:forEach>
                                </select>
                            </td>
                            <td>&nbsp;</td>
                            <td><input type="checkbox" /> ไม่มีสัญญาณไฟ</td>
                            </c:otherwise>
                        </c:choose>

                </tr>
                <tr>
                    <td align="right">สายทาง : </td>
                    <td>
                        <select id="line" name="line" class="require" tabindex="1" >
                            <option value="" selected>เลือกสายทาง</option>
                            <c:forEach items="${lineList}" var="l" varStatus="i">
                                <option value="${l.lineId}">${l.lineId} : ${l.lineName}</option>
                            </c:forEach>
                        </select>
                    </td>
                    <td align="right">&nbsp;</td>
                    <td><input type="checkbox" /> ไม่มีสังกัดข้างรถ</td>
                </tr>

                <tr>
                    <td align="right">วันที่พลการ : </td>
                    <td>
                        <input type="text" name="uapDate" id="uapDate" readonly="" class="require" tabindex="4" value="${now}"/>
                        <a href="#"><img src="theme/images/icons/calendar_icon.gif"
                                         border="0" width="18" height="18"
                                         onclick="return showCalendar('uapDate', '%d/%m/%Y');"/></a>

                    </td>
                    <td align="right">สถานะของรายการ : </td>
                    <td><div id="exceptStatus"></div></td>
                </tr>

                <tr>
                    <td align="right">เวลา : </td>
                    <td>
                        <!--
                        <input type="text" name="hour" id="hour" size="2" maxlength="2"
                               class="require" tabindex="5"/> :
                        <input type="text" name="minute" id="minute" size="2" maxlength="2" class="require" tabindex="6" />
                        -->
                        <select name="hour" id="hour" class="require" tabindex="5">
                            <option value="" selected></option>
                            <option value="00">00</option>
                            <option value="01">01</option>
                            <option value="02">02</option>
                            <option value="03">03</option>
                            <option value="04">04</option>
                            <option value="05">05</option>
                            <option value="06">06</option>
                            <option value="07">07</option>
                            <option value="08">08</option>
                            <option value="09">09</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            <option value="13">13</option>
                            <option value="14">14</option>
                            <option value="15">15</option>
                            <option value="16">16</option>
                            <option value="17">17</option>
                            <option value="18">18</option>
                            <option value="19">19</option>
                            <option value="20">20</option>
                            <option value="21">21</option>
                            <option value="22">22</option>
                            <option value="23">23</option>
                        </select>:
                        <select name="minute" id="minute" class="require" tabindex="6">
                            <option value="" selected></option>
                            <option value="00">00</option>
                            <option value="01">01</option>
                            <option value="02">02</option>
                            <option value="03">03</option>
                            <option value="04">04</option>
                            <option value="05">05</option>
                            <option value="06">06</option>
                            <option value="07">07</option>
                            <option value="08">08</option>
                            <option value="09">09</option>
                            <option value="10">10</option>
                            <option value="11">11</option>
                            <option value="12">12</option>
                            <option value="13">13</option>
                            <option value="14">14</option>
                            <option value="15">15</option>
                            <option value="16">16</option>
                            <option value="17">17</option>
                            <option value="18">18</option>
                            <option value="19">19</option>
                            <option value="20">20</option>
                            <option value="21">21</option>
                            <option value="22">22</option>
                            <option value="23">23</option>
                            <option value="24">24</option>
                            <option value="25">25</option>
                            <option value="26">26</option>
                            <option value="27">27</option>
                            <option value="28">28</option>
                            <option value="29">29</option>
                            <option value="30">30</option>
                            <option value="31">31</option>
                            <option value="32">32</option>
                            <option value="33">33</option>
                            <option value="34">34</option>
                            <option value="35">35</option>
                            <option value="36">36</option>
                            <option value="37">37</option>
                            <option value="38">38</option>
                            <option value="39">39</option>
                            <option value="40">40</option>
                            <option value="41">41</option>
                            <option value="42">42</option>
                            <option value="43">43</option>
                            <option value="44">44</option>
                            <option value="45">45</option>
                            <option value="46">46</option>
                            <option value="47">47</option>
                            <option value="48">48</option>
                            <option value="49">49</option>
                            <option value="50">50</option>
                            <option value="51">51</option>
                            <option value="52">52</option>
                            <option value="53">53</option>
                            <option value="54">54</option>
                            <option value="55">55</option>
                            <option value="56">56</option>
                            <option value="57">57</option>
                            <option value="58">58</option>
                            <option value="59">59</option>
                        </select>
                    </td>
                    <td align="right">&nbsp;</td>
                    <td>
                        <div class="buttons">
                            <button class="positive" id="check" onclick="return false;">
                                <img  src="theme/images/icons/action_check.gif" alt="" width="16" height="16"/>ตรวจสอบข้อมูล
                            </button>

                            <button class="positive" id="edit" onclick="return false;">
                                <img  src="theme/images/icons/reply.gif" alt="" width="16" height="16"/>แก้ไขข้อมูล
                            </button>
                        </div>
                    </td>
                </tr>

            </table>
        </fieldset>

        <div class="tabber" id="detailExcept">
            <div class="tabbertab">
                <h2>ข้อมูลรถพลการตำรวจ</h2>
                <table width="100%" cellpadding="1">
                    <tr>
                        <td width="150px" align="right">รหัสสังกัด : </td>
                        <td width="350px">
                            <input type="text" name="pol" id="pol" class="require" tabindex="16" />
                            <input type="hidden" name="pola" id="pola" />

                        </td>
                        <td width="150px" align="right">จำนวนเงินที่ชำระ :</td>
                        <td>
                            <input type="text" name="pay" id="pay" class="require" tabindex="12"/>
                        </td>
                    </tr>

                    <tr>
                        <td align="right"><div id="dExitStation">ด่าน : </div> </td>
                        <td>
                            <select id="exitStation" name="exitStation" class="require" tabindex="2">
                                <option value="" selected>เลือกด่าน</option>
                                <c:forEach items="${exitStationList}" var="s" varStatus="i">
                                    <option value="${s.stationId}">${s.stationId} : ${s.stationName}</option>
                                </c:forEach>
                            </select>
                        </td>
                        <td align="right">อัตราค่าผ่านทาง :</td>
                        <td>
                            <input id="rate" name="rate" class="require" readonly />
                        </td>
                    </tr>
                    <tr>
                        <td align="right"><div id="dEnterStation"></div> </td>
                        <td>
                            <select id="enterStation" name="enterStation" class="require" tabindex="3" >
                                <option value="" selected>เลือกด่าน</option>
                                <c:forEach items="${enterStationList}" var="s" varStatus="i">
                                    <option value="${s.stationId}">${s.stationId} : ${s.stationName}</option>
                                </c:forEach>
                            </select>
                        </td>
                        <td align="right"><div id="dCard"></div> </td>
                        <td>
                            <input type="checkbox" name="ckCard" id="ckCard" />
                            <input type="hidden" name="card" id="card" tabindex="13" /> &nbsp;
                        </td>
                    </tr>

                    <tr>
                        <td align="right">ประเภทรถ : </td>
                        <td>
                            <select id="carType" name="carType" class="require" tabindex="7" >
                                <option value="" selected>เลือกประเภทรถ</option>
                                <c:forEach items="${carTypeList}" var="c" varStatus="i">
                                    <option value="${c.carTypeId}">${c.carTypeName}</option>
                                </c:forEach>
                            </select>
                        </td>
                        <td align="right">พนักงานเก็บเงิน :</td>
                        <td>
                            <input type="text" name="emp1" id="emp1" tabindex="14" />
                            <input type="hidden" id="emp1a" name="emp1a" />
                            ช่องทาง
                            <input type="text" name="len" id="len" size="2" tabindex="15" />
                        </td>
                    </tr>

                    <tr>
                        <td align="right">สีรถ : </td>
                        <td>
                            <select id="color" name="color" class="require" tabindex="8" >
                                <option value="" selected>เลือกสีรถ</option>
                                <c:forEach items="${colorList}" var="c" varStatus="i">
                                    <option value="${c.colorId}">${c.colorName}</option>
                                </c:forEach>
                            </select>
                        </td>
                        <td align="right">พนักงานควบคุม :</td>
                        <td>
                            <input type="text" name="emp2" id="emp2" tabindex="16" />
                            <input type="hidden" name="emp2a" id="emp2a" />
                        </td>
                    </tr>

                    <tr>
                        <td align="right">ยี่ห้อ : </td>
                        <td>
                            <select id="brand" name="brand" class="require" tabindex="9" >
                                <option value="" selected>เลือกยี่ห้อ</option>
                                <c:forEach items="${brandList}" var="b" varStatus="i">
                                    <option value="${b.brandId}">${b.brandName}</option>
                                </c:forEach>
                            </select>
                        </td>
                        <td align="right">หัวหน้าพนักงาน :</td>
                        <td>
                            <input type="text" name="emp3" id="emp3" class="require" tabindex="17"
                                   value="<%= (String) session.getAttribute("uap_user_desc")%>" />
                            <input type="hidden" id="emp3a" name="emp3a"
                                   value="<%= (String) session.getAttribute("uap_user_id")%>" />

                        </td>
                    </tr>
                    <tr>
                        <td align="right">&nbsp;</td>
                        <td>&nbsp;</td>
                        <td align="right">จำนวนเงินที่เรียกเก็บ :</td>
                        <td><input id="result" name="result" style="width:150px;border: 1px solid #000;
                                   text-align: center;vertical-align: middle;
                                   font-size: 30px;background: #000;color: green;" readonly /></td>
                    </tr>

                    <tr>
                        <td align="right">&nbsp;</td>
                        <td>
                            <div class="buttons">
                                <button class="positive" id="save">
                                    <img  src="theme/images/icons/save.gif" alt="" width="16" height="16"/>บันทึกข้อมูล
                                </button>
                            </div>
                        </td>
                        <td align="right">&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>


                </table>
            </div>
        </div>
    </div>
</form>
<script type="text/javascript">
    emp1("emp1","#emp1a");
    emp2("emp2","#emp2a");
    emp3("emp3","#emp3a");
    pol("pol","#pola");

</script>
<%@include file="theme/Footer.jsp" %>
